<template>
    <div class='navBar'>
        <NuxtLink
          class='item'
          @click="emits('change',item.id)"
          :class="{ 'active': current === item.id }"
          v-for="item in navList"
          :key="item.id"
          :to="$route.path + '?id=' + item.id">
          <span>{{ item.name }}</span>
        </NuxtLink>
    </div>
</template>

<script setup lang="ts">
defineProps({
    navList:{
        type:Array<{
            name:string,
            id:number
        }>,
    },
    current: Number,
})
const emits = defineEmits(['change'])
</script>

<style lang="scss" scoped>
.navBar{
    padding-top: 5px;
    .item{
        display: block;
        margin: 0px 14px 0px 24px;
        line-height: 48px;
        cursor: pointer;
    }
    .active{
        color: rgb(252, 169, 44);
    }
}
</style>